<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<meta name="x5-orientation" content="portrait" />
		<meta name="x5-fullscreen" content="true" />
		<meta name="screen-orientation" content="portrait" />
		<meta name="full-screen" content="yes" />
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/maintain_map.css" />
		<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" />
		<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="js/vue1.0.js"></script>
		<script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
		<script src="http://webapi.amap.com/maps?v=1.4.3&key=d5078d6a483d2ff15618e1c0ca7c0dc3"></script>
		<script type="text/javascript" src="js/index.js"></script>
		<title>保养地图</title>
	</head>

	<body>
		<!-- header_头部 -->
		<header>
			<p>
				<a href="maintain.html"></a>
				<i>保养</i>
			</p>
		</header>
		<div class="dd"></div>
		<div id="container"></div>
		<di id="tip" style="display: none;">
			</div>
	</body>

</html>
<script>
	$(function() {
		var map, geolocation;
		//加载地图，调用浏览器定位服务
		map = new AMap.Map('container', {
			resizeEnable: true
		});
		map.plugin('AMap.Geolocation', function() {
			geolocation = new AMap.Geolocation({
				enableHighAccuracy: true, //是否使用高精度定位，默认:true
				//          timeout: 10000,          //超过10秒后停止定位，默认：无穷大
				buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
				zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
				buttonPosition: 'RB'
			});
			map.addControl(geolocation);
			geolocation.getCurrentPosition();
			AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息
			AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
		});
		//解析定位结果
		function onComplete(data) {
			console.log(data, "定位数据")
			//地图初始化时，在地图上添加一个marker标记,鼠标点击marker可弹出自定义的信息窗体
			var map = new AMap.Map("container", {
				resizeEnable: true,
				center: [data.position.getLng(), data.position.getLat()],
				zoom: 10
			});
			var str = ['定位成功'];
			str.push('经度：' + data.position.getLng());
			str.push('纬度：' + data.position.getLat());
			if(data.accuracy) {
				str.push('精度：' + data.accuracy + ' 米');
			} //如为IP精确定位结果则没有精度信息
			str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
			document.getElementById('tip').innerHTML = str.join('<br>');
			//      console.log(data.position.getLng())
			$.ajax({
				type: "get",
				url: site + "/upkeep/seller",
				dataType: 'json',
				data: {
					longitude: data.position.getLng(),
					latitude: data.position.getLat(),
				},
				success: function(data) {
					var jsons = data.data
					$.each(jsons, function(i, val) {
						//添加marker标记
						var marker = new AMap.Marker({
							map: map,
							position: [val.longitude, val.latitude],
							icon: new AMap.Icon({
								size: new AMap.Size(40, 50), //图标大小
								image: "images/icon/icon_49.png",
								imageOffset: new AMap.Pixel(0, -60)
							})
						});
						console.log(marker)
						//鼠标点击marker弹出自定义的信息窗体
						AMap.event.addListener(marker, 'click', function() {
							infoWindow.open(map, marker.getPosition());
							$('.info').click(function() {
								var str = $('.1').attr('data-sjid');
								var int = str * 1;
								console.log(parseInt(str))
								window.location.href = "./maintain-goods.html"
								loca_save('sjid', parseInt(str))
							})
						});
						//实例化信息窗体
						var title = '' + val.sellerName + '',
							content = [];
						content.push("<div class='1' data-sjid=" + val.sellerId + " style='width: 3.72rem;height: 3.72rem;overflow: hidden;float:left'><img src='" + val.photo + "' style='width: 5.12rem;height: 5.12rem;'></div>");
						content.push("<div style='float:left;margin-left: 0.4rem;width: 8rem;'><p><span style='font-size: 0.41rem;color: #f8813e;'>" + val.grade + "<i style='color: #999999;'>分</i></span><strong style='width: 1px;height: 0.42rem;background: #ddd;display: inline-block;margin: 0 0.3rem;'></strong><span style='font-size: 0.41rem;color: #f8813e;'>" + loca_fetch('order') + "<i style='color: #999999;'>人购买</i></span></p><p style='color: #999;font-size: 0.41rem;'>营业时间:<i style='margin-left: 0.35rem;'>" + val.startTime + "</i>-<i>" + val.endTime + "</i></p><p style='color: #ff4a26;font-size: 0.34rem;'>¥<b style='font-size: 0.7rem;'>" + loca_fetch('price') + "</b><span><i style='font-size: 0.42rem;color: #828282;float:right;'>" + val.distance + "m</i></span></p></div>");
						var infoWindow = new AMap.InfoWindow({
							isCustom: true, //使用自定义窗体
							content: createInfoWindow(title, content.join("<br/>")),
							offset: new AMap.Pixel(16, -45)
						});

						//构建自定义信息窗体
						function createInfoWindow(title, content) {
							var info = document.createElement("div");
							info.className = "info";

							//可以通过下面的方式修改自定义窗体的宽高
							//info.style.width = "400px";
							// 定义顶部标题
							var top = document.createElement("div");
							var titleD = document.createElement("div");
							var closeX = document.createElement("img");
							top.className = "info-top";
							titleD.innerHTML = title;
							closeX.onclick = closeInfoWindow;

							top.appendChild(titleD);
							top.appendChild(closeX);
							info.appendChild(top);

							// 定义中部内容
							var middle = document.createElement("div");
							middle.className = "info-middle";
							middle.style.backgroundColor = 'white';
							middle.innerHTML = content;
							info.appendChild(middle);
							return info;
						}
						//关闭信息窗体
						function closeInfoWindow() {
							map.clearInfoWindow();
						}
					});
				}
			});
		}
		//解析定位错误信息
		function onError(data) {
			document.getElementById('tip').innerHTML = '定位失败';
		}
		//附近商家列表
		function GetQueryString(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
			var r = window.location.search.substr(1).match(reg);
			if(r != null) return unescape(r[2]);
			return null;
		}
	})
</script>